<%
var headerPart = {
%>
<% include("/include/treeview.html"){} %>
<script type="text/javascript">

    var officeTree;
    var selectedTree;//zTree已选择对象

    // 初始化
    $(document).ready(function(){
        officeTree = $.fn.zTree.init($("#officeTree"), setting, officeNodes);
        selectedTree = $.fn.zTree.init($("#selectedTree"), setting, selectedNodes);
    });

    var setting = {view: {selectedMulti:false,nameIsHTML:true,showTitle:false,dblClickExpand:false},
        data: {simpleData: {enable: true}},
        callback: {onClick: treeOnClick}};

    var officeNodes=[
		<%for(office in officeList){%>
	 	{id:"${office.id}",
        pId:"${isNotEmpty(office.parent)?office.parent.id:0}",
        name:"${office.name}"},
    	<%}%>];

    var pre_selectedNodes =[
        <%for(user in userList){%>
    	{id:"${user.id}",
        pId:"0",
        name:"<font color='red' style='font-weight:bold;'>${user.name}</font>"},
    	<%}%>];

    var selectedNodes =[
    	<%for(user in userList){%>
    	{id:"${user.id}",
        pId:"0",
        name:"<font color='red' style='font-weight:bold;'>${user.name}</font>"},
    	<%}%>];

    var pre_ids = "${selectIds}".split(",");
    var ids = "${selectIds}".split(",");

    //点击选择项回调
    function treeOnClick(event, treeId, treeNode, clickFlag){
        $.fn.zTree.getZTreeObj(treeId).expandNode(treeNode);
        if("officeTree"==treeId){
            $.get("${ctx}/sys/role/users?officeId=" + treeNode.id, function(userNodes){
                $.fn.zTree.init($("#userTree"), setting, userNodes);
            });
        }
        if("userTree"==treeId){
            //alert(treeNode.id + " | " + ids);
            //alert(typeof ids[0] + " | " +  typeof treeNode.id);
            if($.inArray(String(treeNode.id), ids)<0){
                selectedTree.addNodes(null, treeNode);
                ids.push(String(treeNode.id));
            }
        };
        if("selectedTree"==treeId){
            if($.inArray(String(treeNode.id), pre_ids)<0){
                selectedTree.removeNode(treeNode);
                ids.splice($.inArray(String(treeNode.id), ids), 1);
            }else{
                layer.msg("角色原有成员不能清除！", {icon: 1});
            }
        }
    };
    function clearAssign(){
        tips="确定清除角色【${role.name}】下的已选人员？";
        layer.confirm(tips, {
            btn: ['确定','取消'] //按钮
        }, function(){
            var tips="";
            if(pre_ids.sort().toString() == ids.sort().toString()){
                tips = "未给角色【${role.name}】分配新成员！";
            }else{
                tips = "已选人员清除成功！";
            }
            ids=pre_ids.slice(0);
            selectedNodes=pre_selectedNodes;
            $.fn.zTree.init($("#selectedTree"), setting, selectedNodes);
            layer.msg(tips, {icon: 1});
        }, function(){
            layer.msg("取消清除操作！",{icon: 1})
        });
    };
</script>
<% }; %>
<% layout("/layouts/micro.html",{headerSection:headerPart}){ %>
	<div id="assignRole" class="layui-row">
		<div class="layui-col-xs4" style="border-right: 1px solid #A8A8A8;height: 450px;">
			<p>所在部门：</p>
			<div id="officeTree" class="ztree"></div>
		</div>
		<div class="layui-col-xs4">
			<p>待选人员：</p>
			<div id="userTree" class="ztree"></div>
		</div>
		<div class="layui-col-xs4" style="padding-left:16px;border-left: 1px solid #A8A8A8;height: 450px;">
			<p>已选人员：</p>
			<div id="selectedTree" class="ztree"></div>
		</div>
	</div>
<%}%>